package com.example.nick.bodyapplication.compose

import android.graphics.RectF
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Menu
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.NativeCanvas
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import com.example.nick.bodyapplication.R

@Composable
fun HelloContent() {
    Column(modifier = Modifier.padding(16.dp)) {
        var name by remember { mutableStateOf("") }
        Text(
            text = "Hello!",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.h5
        )
        OutlinedTextField(
            value = name,
            onValueChange = { },
            label = { Text("Name") }
        )
    }
}

@Composable
fun HelloContent2() {
    Column(modifier = Modifier.padding(16.dp)) {
        var name by remember { mutableStateOf("") }
        if (name.isNotEmpty()) {
            Text(
                text = "Hello, $name!",
                color = Color.White,
                modifier = Modifier.padding(bottom = 8.dp),
                style = MaterialTheme.typography.h5
            )
        }
        OutlinedTextField(
            value = name,
            onValueChange = { name = it },
            modifier = Modifier
                .padding(0.dp)
                .background(Color.Yellow)
//            label = { Text("Name") }
        )
    }
}

//@Preview
@ExperimentalAnimationApi
@Composable
fun JetpackCompose() {
    Card {
        var expanded by remember { mutableStateOf(false) }
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
                .clickable { expanded = !expanded },
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Image(painter = painterResource(id = R.drawable.img), contentDescription = null)
            AnimatedVisibility(visible = expanded) {
                Text(
                    text = "Jetpack Compose",
                    Modifier
                        .background(Color.Red)
                        .padding(16.dp),
                    style = MaterialTheme.typography.h2
                )
            }
        }
    }
}

@Composable
fun ButtonArea(myOnClick: () -> Unit) {
    Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
        Button(onClick = myOnClick) { //}{ myOnClick.invoke() }) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                MyImage()
                Spacer(modifier = Modifier.padding(4.dp))
                Text("Button")
            }
        }
    }
}

@Composable
fun MyImage() {
//    Image(painter = , contentDescription = )
    Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
//    Icon(painter = , contentDescription = )
}